<template>
	<div v-if="toolBar" style="margin: 0px 0px 8px 10px; line-height: 36px">
		<el-row>
			<el-col v-for="(tool, index) in toolBar" :key="index" :span="1.5">
				<div
					v-has-permi="tool.permi"
					:class="
						buttonIsDisabled(
							tool.disable === 'check' ? 'check' : tool.disable === 'single' ? single : tool.disable === 'multiple' ? multiple : false,
							tool.check
						)
					"
					@click="
						clickCallBack(
							tool.disable === 'check' ? 'check' : tool.disable === 'single' ? single : tool.disable === 'multiple' ? multiple : false,
							tool.handler,
							tool.check
						)
					"
				>
					<svg-icon :icon-class="tool.icon" class="icon-style" circle></svg-icon>
					<span class="icon-title" style="margin-left: 2px; margin-right: 15px; font-size: 14px">
						{{ tool.name }}
					</span>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script setup namme="ToolBar" lang="tsx">
const props = defineProps<{
	toolBar: ToolbarType[];
	// 修改按钮，选中长度不等于1禁用
	single: boolean;
	// 删除按钮，没有选中项禁用
	multiple: boolean;
}>();

//按钮css 控制
function buttonIsDisabled(val: boolean | 'check', callBack?: () => any) {
	if (val === 'check') {
		if (callBack!()) {
			return 'enabled';
		}
		return 'disabled';
	}
	if (val) {
		return 'disabled';
	}
	return 'enabled';
}
//按钮是否触发控制
function clickCallBack(val: boolean | 'check', callBack: () => any, checkCallBack?: () => boolean) {
	if (val === 'check') {
		if (checkCallBack!()) {
			callBack();
		}
	}
	if (!val) {
		// return callBack();
		callBack();
	}
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.icon-style {
	// color: var(--el-text-color-primary);
}

// /*操作按钮启用*/
.enabled {
	color: var(--el-color-primary-light-3);
	cursor: pointer;

	.icon-title {
		&:hover {
			color: var(--el-color-primary-lighter);
			text-decoration: underline;
		}
	}
}

// /*操作按钮禁用*/
.disabled {
	color: var(--el-text-color-disabled);
	cursor: not-allowed;
}
</style>
